[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" import { DashboardHeader } from "@/components/dashboard-header" import { DateTaskSection } from "@/components/date-task-section" import { HelpSection } from "@/components/help-section" import { FinancialCards } from "@/components/financial-cards" import { ChartsSection } from "@/components/charts-section" import { ActivityManager } from "@/components/activity-manager" import { BusinessPlans } from "@/components/business-plans" import { WalletVerification } from "@/components/wallet-verification" import { MainStocks } from "@/components/main-stocks" import { SurveySection } from "@/components/survey-section" export default function Dashboard() { return (

{/* Main Content Area - 3 columns */}

{/* Top Row: Date/Task and Help sections */}

{/* Financial Cards Grid */} {/* Bottom Row: Charts and Activity */}

{/* Right Sidebar - 1 column */}

) } [V0_FILE]typescriptreact:file="components/dashboard-header.tsx" isMerged="true" import { Menu, Plus, Search } from "lucide-react" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Input } from "@/components/ui/input" export function DashboardHeader() { return (

Financial

Dashboard

Abhilash

CEO

) } [V0_FILE]typescriptreact:file="components/date-task-section.tsx" isMerged="true" import { Calendar, ArrowRight } from "lucide-react" import { Button } from "@/components/ui/button" export function DateTaskSection() { return (

Tue,

December

) } [V0_FILE]typescriptreact:file="components/help-section.tsx" isMerged="true" import { Mic } from "lucide-react" export function HelpSection() { return (

Hey, Need help?👋

Just ask me anything!

) } [V0_FILE]typescriptreact:file="components/financial-cards.tsx" isEdit="true" isMerged="true" import { Plus, TrendingUp, MoreHorizontal, Share2, ChevronDown, Clock, BarChart3 } from "lucide-react" import { Card, CardContent } from "@/components/ui/card" import { Button } from "@/components/ui/button" export function FinancialCards() { return (

{/* Top Row */} {/* VISA Card */}

VISA

Linked to main account

**** 2719

{/* Direct Debits */}

Direct Debits

Total income

$23,194.80

{/* Weekly Stats */}

Weekly

System Lock

13 Days

109 hours, 23 minutes

{Array.from({ length: 12 }).map((_, i) => (

))}

{/* 2023 Stats */}

2023

2022

{/* Bottom Row */} {/* Monthly Fee */}

Monthly regular fee

$25.00

{/* Total Paid */}

Edit

Total paid

$8,145.20

cards limitation

{/* Weekly Growth */}

Weekly

View

36%

Growth rate

on chart mode

{/* Performance Chart */}

$16,073.49

Main Stocks +9.3%

Extended & Limited

) } [V0_FILE]typescriptreact:file="components/charts-section.tsx" isEdit="true" isMerged="true" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { ChevronDown } from "lucide-react" export function ChartsSection() { return (

{/* Annual Profits Chart */} Annual profits

2025

{/* Outermost circle - $14K */}

{/* Second circle - $9.3K */}

{/* Third circle - $6.8K */}

{/* Inner circle - $4K */}

$4K

$14K

$9.3K

$6.8K

{/* Activity Chart */}

$43.20 USD

{[60, 40, 80, 30, 90, 45, 70, 35, 85, 50, 75, 40].map((height, i) => (

))}

{Array.from({ length: 5 }).map((_, i) => (

))}

) } [V0_FILE]typescriptreact:file="components/activity-manager.tsx" isEdit="true" isMerged="true" import { Search, Filter, MoreHorizontal, Settings } from "lucide-react" import { Input } from "@/components/ui/input" import { Badge } from "@/components/ui/badge" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" export function ActivityManager() { return ( Activity manager

Filters

Team • Insights × Today ×

) } [V0_FILE]typescriptreact:file="components/business-plans.tsx" isEdit="true" isMerged="true" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { MoreHorizontal, ChevronDown } from "lucide-react" export function BusinessPlans() { const plans = [ { name: "Bank loans", status: "active", hasDropdown: true }, { name: "Accounting", status: "active", hasDropdown: false }, { name: "HR management", status: "inactive", hasDropdown: false }, ] return ( Business plans

{plans.map((plan, index) => (

{plan.name}

{plan.hasDropdown && }

))}

) } [V0_FILE]typescriptreact:file="components/ui/badge.tsx" isMerged="true" import type * as React from "react" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const badgeVariants = cva( "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", { variants: { variant: { default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80", secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80", destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80", outline: "text-foreground", }, }, defaultVariants: { variant: "default", }, }, ) export interface BadgeProps extends React.HTMLAttributes, VariantProps {} function Badge({ className, variant, ...props }: BadgeProps) { return

} export { Badge, badgeVariants } [V0_FILE]png:file="public/professional-man.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/professional-man-Fj9TWS5nFRLskTWQQg8bt63z4Faz9Z.png" isMerged="true" [V0_FILE]typescriptreact:file="components/wallet-verification.tsx" isEdit="true" import { Card, CardContent } from "@/components/ui/card" import { Button } from "@/components/ui/button" export function WalletVerification() { return (

{/* Radiating lines */} {Array.from({ length: 8 }).map((_, i) => (

))}

Wallet Verification

Enable 2-step verification
to secure your wallet.

) } [V0_FILE]typescriptreact:file="components/main-stocks.tsx" isEdit="true" import { Card, CardContent } from "@/components/ui/card" import { TrendingUp } from "lucide-react" export function MainStocks() { return (

+9.3%

$16,073.49

Main Stocks

Extended & Limited

) } [V0_FILE]typescriptreact:file="components/survey-section.tsx" isEdit="true" import { Card, CardContent } from "@/components/ui/card" import { X, Minimize2 } from "lucide-react" export function SurveySection() { return (

Priority rating

How is your business
management going?

{Array.from({ length: 5 }).map((_, i) => (

{i === 2 &&

}

))}

) }

About

Tags

Share

More from abhilashsahoo

More Templates Like This

About

Tags

Share

About

Tags

Share

More from abhilashsahoo

More Templates Like This